<template>
	<el-card class="memorial-settings-card" shadow="never">
		<el-page-header @back="goBack" class="detail-page-header">
			<template #content>
				<!-- 显示项目名称 -->
				<span class="text-large font-600 mr-3"> {{ '设置墓地' }} </span>
			</template>
			<!-- 如果需要，可以在 PageHeader 右侧添加额外内容或操作按钮 -->
		</el-page-header>
		<el-divider />
		<!-- 顶部 Tabs -->
		<!-- <el-tabs v-model="activeTab" class="settings-tabs">
			<el-tab-pane label="墓地样式设置" name="style">
				

			</el-tab-pane>
			<el-tab-pane label="使用相册背景" name="album">
				<div>相册背景设置内容...</div>
			</el-tab-pane>
		</el-tabs> -->

		<!-- 当前样式预览区域 -->
		<div class="preview-area">
			<el-image :src="currentStyle?.cover || placeholderImageUrl" fit="scale-down">
				<template #error>
					<div class="image-slot-placeholder">样式预览区</div>
				</template>
			</el-image>
		</div>

		<!-- 样式选择区域 -->
		<div class="section-title">墓地样式设置</div>
		<el-radio-group v-model="selectBackgroundId" class="item-selection-grid">
			<el-row :gutter="20">
				<div style="display: grid; grid-template-columns: repeat(5, 1fr);gap: 10px;">
					<div  v-for="bg in muBackgroundList" :key="bg.id">
						<div class="item-card" :class="{ 'is-selected': selectBackgroundId === bg.id }"
							@click="handleSelectGraveyardStyle(bg)">

							<div style="position: relative;">
								<el-image :src="bg.cover || placeholderImageUrl" fit="contain"></el-image>
								<span v-if="selectBackgroundId === bg.id" class="current-tag">当前使用</span>
								<span v-if="bg.type > 1" class="current-type">{{ bg.type > 2 ? '尊贵' : '豪华' }}</span>

							</div>
							<div class="item-info">
								<div class="item-actions">
									<el-radio :label="bg.id" size="small">{{ bg.title }}</el-radio>
								</div>
								
							</div>
						</div>
					</div>
				</div>
				<!-- <el-col v-for="bg in muBackgroundList" :key="bg.id" :xs="12" :sm="8" :md="6" :lg="6" :xl="4">
					<div class="item-card" :class="{ 'is-selected': selectBackgroundId === bg.id }"
						@click="selectBackgroundId = bg.id">
						<el-image :src="bg.cover || placeholderImageUrl" fit="contain">
						</el-image>
						<div class="item-info">
							<div class="item-actions">
								<el-radio :label="bg.id" size="small">{{ bg.title }}</el-radio>
							</div>
							<span v-if="selectBackgroundId === bg.id" class="current-tag">当前使用</span>
						</div>
					</div>
				</el-col> -->
			</el-row>
		</el-radio-group>
		<!-- 分割线 (可选) -->
		<!-- <el-divider /> -->

		<!-- 背景选择区域 -->
		<div class="section-title">墓地背景设置</div>
		<el-radio-group v-model="selectTemplateId" class="item-selection-grid">
			<el-row :gutter="15">
				<div style="width: 100%;display: grid; grid-template-columns: repeat(5, 1fr);gap: 10px;" >
					<div v-for="templateItem in muTemplateList" :key="templateItem.id">
						<div class="item-card background-card" :class="{ 'is-selected': selectTemplateId === templateItem.id }"
							@click="handleSelectGraveyardBackground(templateItem)">

							<div style="position: relative;">
								<el-image :src="templateItem.cover || placeholderImageUrl" fit="cover">
									<template #error>
										<div class="image-slot-placeholder small">背景图片</div>
									</template>
								</el-image>
								<span v-if="selectTemplateId === templateItem.id" class="current-tag">当前使用</span>
								<span v-if="templateItem.type > 1" class="current-type">{{ templateItem.type > 2 ? '尊贵' : '豪华' }}</span>

							</div>
							
							<div class="item-info">
								<span class="item-name">{{ templateItem.title }}</span>
								<div class="item-actions">
									<el-radio :label="templateItem.id" size="small">选择</el-radio>
									<!-- <el-link type="primary" :underline="false" @click.stop="selectBackground(templateItem.id)">使用</el-link> -->
									<!-- <el-link type="info" :underline="false" @click.stop="previewBackground(templateItem.id)">预览</el-link> -->
								</div>
								
							</div>
						</div>
					</div>
					

				</div>
				<!-- <el-col v-for="templateItem in muTemplateList" :key="templateItem.id" :xs="12" :sm="8" :md="6" :lg="4" :xl="4">
					<div class="item-card background-card" :class="{ 'is-selected': selectTemplateId === templateItem.id }"
						@click="selectTemplateId = templateItem.id">
						<el-image :src="templateItem.cover || placeholderImageUrl" fit="cover">
							<template #error>
								<div class="image-slot-placeholder small">背景图片</div>
							</template>
						</el-image>
						<div class="item-info">
							<span class="item-name">{{ templateItem.title }}</span>
							<div class="item-actions">
								<el-radio :label="templateItem.id" size="small">选择</el-radio>
							</div>
							<span v-if="selectTemplateId === templateItem.id" class="current-tag">当前使用</span>
						</div>
					</div>
				</el-col> -->
			</el-row>
		</el-radio-group>

		<!-- 底部操作按钮 -->
		<div class="action-buttons">
			<el-button type="primary" @click="saveSettings">保存墓地背景设置</el-button>
			<el-button @click="goBack">不保存返回上一页</el-button>
		</div>
	</el-card>
</template>

<script setup lang="ts">
import { ref, computed, defineProps, onMounted  } from 'vue';
// 假设你已经全局安装或按需引入了 Element Plus 组件
// import { ElCard, ElTabs, ElTabPane, ElRow, ElCol, ElImage, ElRadioGroup, ElRadio, ElLink, ElButton, ElDivider } from 'element-plus';
import { apiMuBackground, apiMuTemplate, apiMuDetail, apiMuSet } from '@/api/graveyardBackground'
import feedback from '@/utils/feedback';

const props = defineProps({
	memorialId: {
		type: String || Number,
		default: ''
	}
})
// --- 类型定义 ---
interface MemorialItem {
	id: string | number;
	name: string;
	imageSrc: string; // 图片路径，留空或使用占位符路径
}

// --- 响应式状态 ---
const activeTab = ref('style'); // 当前激活的 Tab
const selectBackgroundId = ref<string | number>(1); // 当前选中的墓地样式 ID (假设第一个默认选中)
const selectTemplateId = ref<string | number>(1); // 当前选中的墓地背景 ID (假设第一个默认选中)

// 占位符图片 URL (可以是一个本地路径或网络路径)
// 如果没有真实的占位图，可以留空 ''，el-image 会显示错误插槽内容
const placeholderImageUrl = ref('');

// --- 示例数据 ---
const cemeteryStyles = ref<MemorialItem[]>([
	{ id: 1, name: '福荫', imageSrc: '' },
	{ id: 2, name: '中式墓碑', imageSrc: '' },
	{ id: 3, name: '艺术墓碑', imageSrc: '' },
	{ id: 4, name: '欧式方碑', imageSrc: '' },
	{ id: 5, name: '世纪园', imageSrc: '' },
	{ id: 6, name: '典范园', imageSrc: '' },
]);

const cemeteryBackgrounds = ref<MemorialItem[]>([
	{ id: 'bg1', name: '枫红之恋', imageSrc: '' },
	{ id: 'bg2', name: '宁静湖泊', imageSrc: '' },
	{ id: 'bg3', name: '冬雪庭园', imageSrc: '' },
	{ id: 'bg4', name: '金色森林', imageSrc: '' },
	{ id: 'bg5', name: '烂漫之路', imageSrc: '' },
	{ id: 'bg6', name: '平静湖泊', imageSrc: '' },
	{ id: 'bg7', name: '阳光森林', imageSrc: '' },
	{ id: 'bg8', name: '日暮的呼唤', imageSrc: '' },
	{ id: 'bg9', name: '薰衣草', imageSrc: '' },
	{ id: 'bg10', name: '青山山水', imageSrc: '' },
	{ id: 'bg11', name: '江南意境', imageSrc: '' },
	{ id: 'bg12', name: '都市晨陌', imageSrc: '' },
	{ id: 'bg13', name: '花团', imageSrc: '' },
	{ id: 'bg14', name: '枫树秀', imageSrc: '' },
	{ id: 'bg15', name: '夕阳草地', imageSrc: '' },
	{ id: 'bg16', name: '郁金香', imageSrc: '' },
	{ id: 'bg17', name: '油菜花的浪漫', imageSrc: '' },
	{ id: 'bg18', name: '花墙和绿树', imageSrc: '' },
	{ id: 'bg19', name: '多桥流水', imageSrc: '' },
	{ id: 'bg20', name: '青苔园林', imageSrc: '' },
	{ id: 'bg21', name: '竹林幽径', imageSrc: '' },
	{ id: 'bg22', name: '樱花', imageSrc: '' },
	{ id: 'bg23', name: '青石通幽', imageSrc: '' },
	{ id: 'bg24', name: '远眺', imageSrc: '' },
]);

	// 方法
	
    

	// --- 计算属性 ---
	// 获取当前选中的背景对象，用于预览
	const currentStyle = computed(() => {
		return muBackgroundList.value.find((bg: any) => bg.id === selectBackgroundId.value);
	});

	// 获取当前选中的模板对象 (如果需要在其他地方使用)
	const currentBackground = computed(() => {
		return cemeteryBackgrounds.value.find(templateItem => templateItem.id === selectTemplateId.value);
	});

	// --- 方法 ---
	const selectStyle = (id: string | number) => {
		selectBackgroundId.value = id;
		console.log(`选择了样式: ${id}`);
	};

	const previewStyle = (id: string | number) => {
		console.log(`预览样式: ${id}`);
		// 在这里实现预览逻辑, 比如弹窗显示大图等
	};

	const selectBackground = (id: string | number) => {
		selectTemplateId.value = id;
		console.log(`选择了背景: ${id}`);
	};

	const previewBackground = (id: string | number) => {
		console.log(`预览背景: ${id}`);
	};

	const saveSettings = async () => {
		// console.log('保存设置...');
		// console.log('选中的样式 ID:', selectBackgroundId.value);
		// console.log('选中的背景 ID:', selectTemplateId.value);
		// 在这里添加调用 API 保存数据的逻辑
		// alert('设置已保存 (模拟)');

		await apiMuSet({id: props.memorialId, bg_id: selectBackgroundId.value, template_id: selectTemplateId.value})
		feedback.msgSuccess('设置已保存')
		goBack()
	};

	const emit = defineEmits<{
        (e: 'back-to-list', from: string): void;
    }>();
	const goBack = () => {
		console.log('返回上一页...');
		// 实现返回逻辑, 比如使用 vue-router 的 router.back()
		// alert('返回上一页 (模拟)');
		emit('back-to-list', 'graveyardBackground')
	};


	// 获取墓地背景列表
	const muBackgroundList = ref([])
	const getMuBackgroundList = async () => {
		const res = await apiMuBackground({})
		console.log(res)
		muBackgroundList.value = res
	}

	// 获取墓地模板列表
	const muTemplateList = ref([])
	const getMuTemplateList = async () => {
		const res = await apiMuTemplate({})
		console.log(res)
		muTemplateList.value = res
	}
	// 选择墓地背景
	const handleSelectGraveyardBackground = (templateItem: any) => {
		if(templateItem && templateItem.type > muDetail.value.type){
			feedback.msgError('该背景需要升级才能使用')
			return
		}

		selectTemplateId.value = templateItem.id;
	}
	// 选择墓地样式
	const handleSelectGraveyardStyle = (bg: any) => {
		if(bg && bg.type > muDetail.value.type){

			feedback.msgError('该样式需要升级才能使用')
			return
		}

		selectBackgroundId.value = bg.id;
	}

	// 获取墓地详情
	const muDetail = ref()
	const getMuDetail = async () => {
		const res = await apiMuDetail({id: props.memorialId})
		console.log(res)
		muDetail.value = res
		selectBackgroundId.value = res.bg_id
		selectTemplateId.value = res.template_id
	}
	onMounted(() => {
		getMuBackgroundList()
		getMuTemplateList()
		getMuDetail()
	})
</script>

<style scoped>
.memorial-settings-card {
	/* 设置卡片的整体样式，移除默认边框和阴影以匹配截图 */
	border: 1px solid #DCDFE6;
	/* 添加边框 */
	box-shadow: none;
	padding: 15px;
	/* 调整内边距 */
	width: 100%;
	/* 或者根据需要设置具体宽度 */
}

.settings-tabs {
	/* 调整 Tabs 样式 */
}

/* 移除 Tab 下方的默认 margin，让内容紧随其后 */
:deep(.el-tabs__header) {
	margin-bottom: 15px;
}

.preview-area {
	width: 100%;
	height: 300px;
	/* 根据实际图片调整预览区域高度 */
	background-color: #f5f7fa;
	/* 占位背景色 */
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 20px;
	border: 1px dashed #dcdfe6;
	/* 虚线边框 */
	overflow: hidden;
}

.preview-area .el-image {
	max-width: 100%;
	max-height: 100%;
}

.section-title {
	font-size: 15px;
	font-weight: 600;
	color: #303133;
	margin-top: 25px;
	/* 与上一部分的间距 */
	margin-bottom: 15px;
}

.item-selection-grid {
	display: block;
	/* 让 RadioGroup 独占一行，方便内部 Row/Col 布局 */
}

.item-card {
	border: 1px solid #e4e7ed;
	border-radius: 4px;
	padding: 10px;
	margin-bottom: 15px;
	/* 网格项之间的垂直间距 */
	text-align: center;
	cursor: pointer;
	position: relative;
	/* 为了定位 "当前使用" 标签 */
	transition: border-color 0.3s, box-shadow 0.3s;
	background-color: #fff;
}

.item-card:hover {
	box-shadow: var(--el-box-shadow-lighter);
}

.item-card.is-selected {
	border-color: var(--el-color-primary);
	/* 使用 Element Plus 的主题色 */
}

.item-card .el-image {
	width: 100%;
	height: 100px;
	/* 统一设置网格项图片高度 */
	background-color: #f5f7fa;
	/* 占位背景色 */
	margin-bottom: 8px;
	display: flex;
	/* 用于内部 placeholder 居中 */
	align-items: center;
	justify-content: center;
}

.background-card .el-image {
	height: 80px;
	/* 背景图可以小一点 */
}

.image-slot-placeholder {
	color: #909399;
	font-size: 14px;
}

.image-slot-placeholder.small {
	font-size: 12px;
}

.item-info {
	font-size: 13px;
}

.item-name {
	display: block;
	color: #606266;
	margin-bottom: 5px;
	white-space: nowrap;
	/* 防止名字换行 */
	overflow: hidden;
	text-overflow: ellipsis;
}

.item-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* 链接之间的间距 */
	margin-top: 5px;
	/* 将 Radio 的 label 和实际圆点垂直居中 */
}

.item-actions .el-radio {
	/* 移除 Radio 默认的外边距，并调整使其文本居中 */
	margin-right: 0;
	display: flex;
	/* 使label能更好控制 */
	align-items: center;
}

:deep(.el-radio__label) {
	font-size: 12px;
	/* 统一动作文字大小 */
	padding-left: 4px;
	/* 调整文字与圆点间距 */
}

.item-actions .el-link {
	font-size: 12px;
}

.current-tag {
	position: absolute;
	top: 4px;
	left: 4px;
	background-color: #E6A23C;
	/* 橙色背景 */
	color: white;
	font-size: 10px;
	padding: 1px 4px;
	border-radius: 3px;
	line-height: 1.2;
}
.current-type{
	position: absolute;
	top: 4px;
	right: 4px;
	background-color: #E6A23C;
	/* 橙色背景 */
	color: white;
	font-size: 10px;
	padding: 1px 4px;
	border-radius: 3px;
	line-height: 1.2;
}

.action-buttons {
	margin-top: 30px;
	text-align: center;
	padding-top: 20px;
	border-top: 1px solid #f2f2f2;
	/* 顶部加一条分隔线 */
}

.action-buttons .el-button+.el-button {
	margin-left: 15px;
}
</style>